<template>
  <div id="hypermarker">
    <header>
      <ul class="searchModular">
        <li class="msg"><span class="iconfont icon-dkw_xiaoxi"></span></li>
        <li class="search">
          <a :href="'./searchProList?msg='+searchMsg"><span class="fs iconfont icon-fangdajing"></span></a>
          <input v-model="searchMsg" id="searchInp" type="text">
          <span class="iconfont icon-saoyisao"></span>
        </li>
        <li class="shopCar"><span class="iconfont icon-gouwucheman"></span></li>
      </ul>
      <nav>
        <ul>
          <li v-for="(item,index) in list" @click="chioce(index)" :class="{ chioce: item.isChioce }"><router-link :to="{path: item.path}"> {{item.name}} </router-link></li>
        </ul>
      </nav>
    </header>
    <Nav></Nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue'
export default {
  name: 'Hypermarket',
  data: function(){
    return {
      list: [
        {
          name: "积分商城",
          path: "/integralmarket",
          isChioce: false
        },
        {
          name: "新品商城",
          path: "/newsmarket",
          isChioce: false
        },
        {
          name: "模板商城",
          path: "/templatemarket",
          isChioce: true
        }
      ],
      searchMsg: '',
    }
  },
  beforeCreate: function(){
    
  },
  components: {
    Nav,
  },
  methods: {
    fn: function() {
      console.log('发送一次请求');
      var params = this.$qs.stringify({            
        "username": "admin",   //参数，键值对，key值：value值
        "password": "123456"
      });
      this.axios.post('/web'+'/test',{            
        "username": "admin",   //参数，键值对，key值：value值
        "password": "123456"
      }).then(response=>{
           console.log(response)
      }).catch(err=>{
           console.log(err)
      })
    },
    
    click: function(index) {
      console.log(index);
    },
    
    chioce: function(index) {
      for (let i=0;i<this.list.length;i++){
        this.list[i].isChioce = false
      }
      this.list[index].isChioce = true
    }
  }
}
</script>


<style >
@import '../../style/Hypermarket.css';

</style>